<template>
  <div class="cash-card-box">
    <div>
      <img src="@/assets/cashier.png" alt="" />
    </div>
    <div>
      <div>{{ cashier }}</div>
      <div>订单量：{{ order }}</div>
      <div>营业额：{{ cash }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cashier: {
      type: String,
    },
    order: {
      type: Number,
    },
    cash: {
      type: Number,
    },
  },
};
</script>
<style lang="less" scoped>
.cash-card-box {
  display: inline-block;
  vertical-align: top;
  margin: 0 20px 16px 0;
  flex: 0 0 32%;
  height: 150px;
  background: #ffffff;
  border: 1px solid #b0b2b5;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  max-width: 340px;
  justify-content: space-between;
  & > div:nth-child(1) {
    display: inline-block;
    vertical-align: top;
    img {
      width: 122px;
    }
  }
  & > div:nth-child(2) {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px 0 10px;
    min-width: 160px;
    & > div {
      font-size: 16px;
      font-family: "Source Han Sans CN";
      font-weight: 400;
      color: #303133;
      line-height: 16px;
    }
    & > div:nth-child(1) {
      padding-top: 10px;
    }
    & > div:nth-child(2) {
      padding-top: 34px;
    }
    & > div:nth-child(3) {
      padding-top: 17px;
    }
  }
}
</style>
